<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 500px;
            height: 500px;
            /* 处理溢出问题 */
            overflow: auto;
            background-color: #efa;
            background-image: url(./img/2.jpg);
            background-repeat: no-repeat;
            /* background-position: 100px 100px; */
            /* 设置背景范围 
                可选值
                   border-box 默认值 背景会包含边框下边
                   padding-box 背景不会出现在边框，只出现在内容区和内边距
                   content-box 背景只出现在内容区
                background-origin 背景图片原点位置
                   可选值
                   padding-box 默认 背景图片原点是从内边距区开始计算
                   content-box 默认 背景图片原点是从内容区开始计算
                   border-box 默认 背景图片原点是从边框区开始计算

            */
            padding: 10px ;
            /* background-origin: padding-box;
            background-origin: content-box; */
            background-origin: border-box;
            /* background-clip: border-box; */
            /* background-clip: padding-box; */
            background-clip: content-box;
            border: 10px red double;

            /* background-size 设置背景图片的大小
               第一个值 表示 宽度
               第二个值 表示 高度
               如果只有一个值，则第二个值默认为auto

               cover 图片比例不变，将元素铺满
               contain 图片比例不变，将图片在元素中完整展示

             */
             /* background-size: 100% ; */
             background-size: cover ;
             /* background-size: contain; */
            
            


        }

        .box2{
            width: 300px;
            height: 1000px;
            background-color: orange;
            background-image: url(./img/1.png);
            background-repeat: no-repeat;
            /* background-attachment 背景元素 
                可选值
                  scroll 默认值 背景图片会跟随元素滚动
                  fixex 背景会固定在页面中，不会随元素滚动
               */
            background-attachment: fixed;
            background-position: 100px 100px;
        }
        .box3{
            width: 500px;
            height: 500px;
            /* background 背景相关的属性的简写，所有背景相关的样式都可通过它来设置，该样式没有个数要求
               注意点
                 background-size 要写在 background-position后 并用'/'隔开
                 background-clip 要写在 background-origin后



             */
            background:#bfa url(./img/2.jpg) center center/contain no-repeat ;
        }
    </style>
</head>
<body>
    <!-- <div class="box1">
        <div class="box2">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, repellat ex at animi perspiciatis quae similique rem consequatur eaque laborum quod obcaecati illo accusantium maiores nesciunt dolore corporis reiciendis? Officiis?
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam a, ipsa tempora iusto hic in accusamus, error ea tenetur fugit rerum unde id perferendis cum! Aspernatur adipisci magnam officiis fugiat?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptatibus, suscipit id cupiditate hic ratione qui architecto modi porro possimus sint labore pariatur? Adipisci, alias delectus sed aliquid saepe architecto?

        </div>
    </div> -->
    <div class="box3"></div>
</body>
</html>